<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="尹 个人网站">
    <meta meta name="description" content="尹的个人网站（首页）">
    <title>尹的个人网站</title>
    <style>
        @keyframes animate {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        @keyframes jump {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(0px, -10px);
            }
            100% {
                transform: translate(0px, 0px);
            }
        }
        
        @keyframes move {
            0% {
                width: 0%;
            }
            100% {
                width: 90%;
            }
        }
        
        @keyframes move2 {
            0% {
                width: 0%;
            }
            100% {
                width: 80%;
            }
        }
        
        @keyframes move3 {
            0% {
                width: 0%;
            }
            100% {
                width: 65%;
            }
        }
        
        .head {
            background: url(1.jpg);
            background-repeat: no-repeat;
            background-size: 1850px 875px;
            /* background-position：; */
            height: 875px;
            width: 1850px;
            margin: 0px auto;
            animation: animate 5s;
        }
        
        #title {
            color: white;
            text-align: center;
            position: absolute;
            top: 40%;
            left: 22.5%;
            font-size: 55px;
            border-top: solid white;
            border-bottom: solid white;
            width: 60%;
            padding-top: 30px;
            padding-bottom: 30px;
            text-decoration: none;
            /* animation: animate 10s; */
        }
        
        #title:hover {
            animation: jump 2s infinite;
        }
        
        .one {
            position: relative;
            top: 2%;
            animation: animate 10s;
        }
        
        .one a {
            color: white;
            font-size: 25px;
            text-decoration: none;
        }
        
        .one a:hover {
            font-size: 30px;
            border-bottom: solid white;
        }
        
        .two {
            position: absolute;
            left: 93%;
            animation: animate 10s;
        }
        
        .two a {
            color: white;
            font-size: 25px;
            text-decoration: none;
        }
        
        .two a:hover {
            font-size: 30px;
            border-bottom: solid white;
        }
        
        .three {
            position: absolute;
            top: 92%;
            animation: animate 10s;
        }
        
        .three a {
            color: white;
            font-size: 25px;
            text-decoration: none;
        }
        
        .three a:hover {
            font-size: 30px;
            border-bottom: solid white;
        }
        
        .fixed {
            background-color: #2ecc71;
            position: fixed;
            bottom: 4%;
            right: 1.5%;
            width: 150px;
            height: 150px;
            border-radius: 75px;
            text-align: center;
            line-height: 150px;
            animation: animate 10s;
            font-size: 40px;
            /* color: white;
            text-decoration: none; */
        }
        
        .fixed a {
            font-size: 35px;
            color: white;
            text-decoration: none;
        }
        
        #photos11 {
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .fixed:hover #photos11 {
            display: block;
        }
    </style>
</head>

<body>
    <div class="head">
        <a href="4.html" id="title"></a>
        <script>
            var text = "WELCOM TO YIN'S PERSONAL WEBSITE";
            var num = text.length;

            var i = 0;

            function show() {
                var shower = text.substr(0, i);
                document.getElementById("title").innerHTML = shower;
                i++;
                if (i + 1 >= num) {
                    clearInterval("done");
                }
            }
            var done = setInterval("show()", 150);
        </script>
        <div class="one">
            <a href="2.html">我的技能</a>
        </div>
        <div class="two">
            <a href="#works3">手绘作品</a>
        </div>
        <div class="three">
            <a href="3.html">版式设计</a>
        </div>
        <div class="fixed">
            <a href="#">联系我</a>
            <div>
                <img id="photos11" src="11.jpg" alt="">
            </div>
        </div>
        <!-- <a href="#" class="fixed">联系我
            <img id="photos11" src="1.jpg" alt="">
        </a> -->
        <!-- <div>
            <a href="#aboutme"><img id="down" src="2.png" alt=""></a>
        </div> -->
    </div>


</body>

</html>